<template>
  <div id="app">
    <div class="nav" v-if="isshow">
      <div class="logo" ref="log"></div>
      <ul>
        <li>
          <a href="javascript:;" @click="shouye()">首页</a>
        </li>
        <li
          v-for="(A, index) in MainList"
          @mouseout="leave(index)"
          @mouseover="enter(index)"
          :key="A.id"
        >
          <a
            href="javascript:;"
            exact
            :class="{ actived: index == isactive }"
            @click="navTab(index, A)"
            >{{ A.name }}</a
          >
        </li>
        <ul class="mouse" v-show="ismouse">
          <li v-for="(item, index) in array" :key="index">
            <img :src="item.picture" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </ul>
      <div class="search">
        <i>
          <svg
            t="1666090027527"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3696"
            width="200"
            height="200"
          >
            <path
              d="M938.64603 886.273219l-173.071777-173.074847c53.665247-63.987337 86.075401-146.400325 86.075401-236.446154 0-203.406666-164.895561-368.298134-368.301204-368.298134-203.409736 0-368.302227 164.892491-368.302227 368.298134 0 203.409736 164.892491 368.302227 368.302227 368.302227 89.246627 0 171.055864-31.767518 234.798631-84.579327l173.148525 173.148525c1.576915 1.576915 8.15575-2.443655 14.6957-8.979512l23.675212-23.675212C936.205445 894.428969 940.222945 887.850134 938.64603 886.273219zM483.347426 778.093381c-166.425404 0-301.338093-134.912689-301.338093-301.338093s134.912689-301.338093 301.338093-301.338093S784.685519 310.329884 784.685519 476.755288 649.773853 778.093381 483.347426 778.093381z"
              p-id="3697"
            ></path>
          </svg>
        </i>
        <input type="text" placeholder="搜一搜" />
      </div>

      <div class="cart">
        <div class="num">{{ $store.getters.setcarsize }}</div>

        <div class="shopcar">
          <div class="list">
            <ul>
              <template v-for="A in $store.state.cart">
                <li @click="shopcarjump(A)" :key="A.skuId" v-if="A.isEffective">
                  <img :src="A.picture" alt="" />

                  <div class="center">
                    <p>{{ A.name }}</p>

                    <p>{{ A.attrsText }}</p>
                  </div>

                  <div class="rigth">
                    <p>￥{{ A.nowPrice }}</p>

                    <p>X{{ A.count }}</p>
                  </div>

                  <div class="cuo" @click.stop="shopcar(A)">X</div>
                </li></template
              >
            </ul>

            <div class="button">
              <div class="left">
                <p>共{{ $store.getters.setcarsize }}商品</p>

                <p>￥{{ $store.getters.setcarvalues }}</p>
              </div>
              <button @click="shopCar">去购物车结算</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="navss" v-else>
      <div class="navs">
        <div class="logo" ref="log"></div>
        <ul>
          <li>
            <a href="javascript:;" @click="shouye()">首页</a>
          </li>
          <li
            v-for="(A, index) in MainList"
            @mouseout="leave(index)"
            @mouseover="enter(index)"
            :key="A.id"
          >
            <a
              href="javascript:;"
              exact
              :class="{ actived: index == isactive }"
              @click="navTab(index, A)"
              >{{ A.name }}</a
            >
          </li>
          <ul class="mouse" v-show="ismouse">
            <li v-for="(item, index) in array" :key="index">
              <img :src="item.picture" />
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </ul>
        <div class="right">
          <a href="javascript:;">品牌</a>
          <a href="javascript:;">专题</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueProject01Nav',
  props: ['MainList'],
  data() {
    return {
      array: [],
      isactive: -1,
      isshow: true,
      ismouse: false,
      memberCartList: [],
    };
  },

  mounted() {
    window.addEventListener('scroll', this.windowScroll);
    this.membercart();
  },

  methods: {
    shopCar() {
      this.$router.push('/shopCar');
    },
    shouye() {
      this.$router.push('/homeView');
    },
    leave(index) {
      if (index != 0) {
        this.ismouse = false;
      }
      this.array = [];
    },
    enter(index) {
      if (index != 0) {
        this.ismouse = true;
        this.$props.MainList.some((item, i, lis) => {
          if (index == i) {
            this.array = lis[i].children;
          }
        });
      }
    },
    navTab(index, A) {
      this.isactive = index;
      this.$router.push({
        name: 'category',
        query: { id: A.id },
      });
      var name = A.name;
      this.$route.meta.name = `首页 ${name}`;
    },
    windowScroll() {
      // 滚动条距离页面顶部的距离
      // 以下写法原生兼容
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop >= 88) {
        this.isshow = false;
      } else {
        this.isshow = true;
      }
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.windowScroll);
    },
    membercart() {
      this.axios({
        url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
        post: 'post',
        headers: {
          Authorization: `Bearer ${this.$store.state.token}`,
        },
      }).then((res) => {
        if (res.data.result) {
          var array = res.data.result;
          this.$store.commit('setcar', array);
        }
      });
    },
    shopcar(A) {
      // this.$router.push('/shopCar');
      this.axios({
        method: 'DELETE',
        url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
        post: 'DELETE',
        headers: {
          Authorization: `Bearer ${this.$store.state.token}`,
          'Content-Type': 'application/json;charset=utf-8',
        },
        data: {
          ids: [A.skuId],
        },
      }).then((res) => {
        console.log(res);
        this.membercart();
      });
    },
    shopcarjump(el) {
      // console.log(el.id);
      this.$router.push({
        name: 'product',
        query: { id: el.id },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.actived {
  color: #27ba9b !important;
  border-bottom: 1px solid #27ba9b !important;
}

#app {
  width: 100%;
  height: 132px !important;
  z-index: 100000;
  background: #fff;
}
.nav {
  width: 1240px;
  height: 132px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  .logo {
    width: 200px;
    height: 132px;
    background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png) no-repeat
      center 18px / contain;
  }
  ul {
    width: 780px;
    height: 32px;
    display: flex;
    padding-left: 40px;
    position: relative;
    li {
      list-style: none;
      line-height: 31px;
      // margin-right: 40px;
      width: 38px;
      text-align: center;
      position: relative;
      &:nth-last-of-type(1) {
        margin-right: 0 !important;
      }
      &:nth-of-type(1) {
        a {
          color: #333 !important;
          border-bottom: none;
        }
      }
      a {
        font-size: 16px;
        line-height: 32px;
        height: 32px;
        display: inline-block;
        color: #333;
        text-decoration: none;
        &:hover {
          color: #27ba9b !important;
          border-bottom: 1px solid #27ba9b !important;
        }
      }
    }
    .mouse {
      width: 1240px;
      height: 132px;
      display: flex;
      flex-wrap: wrap;
      padding: 0 70px;
      align-items: center;
      background: #fff;
      position: absolute;
      bottom: -150px;
      left: -200px;
      display: flex;
      justify-content: flex-start;
      z-index: 1000;
      box-sizing: border-box;
      // overflow: hidden;
      box-shadow: 0 0 5px #ccc;
      transition: all 0.2s 0.1s;
      li {
        width: 110px;
        text-align: center;
        &:hover > p {
          color: rgb(31, 235, 41);
        }
        img {
          width: 60px;
          height: 40px;
        }
        p {
          font-size: 14px;
        }
      }
    }
  }
  .search {
    width: 170px;
    height: 32px;
    position: relative;
    border-bottom: 1px solid #e7e7e7;
    line-height: 32px;
    display: flex;
    align-items: center;
    i {
      padding-top: 5px;
      font-size: 18px;
      margin-left: 5px;
      .icon {
        width: 18px;
        height: 18px;
      }
    }
    input {
      padding-left: 5px;
      width: 140px;
      height: 15px;
      color: #666;
      border: none;
      outline: none;
      font-size: 15px;
    }
  }
  .cart {
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 600;
    background: url(https://preview.520cc.com/58pic/33/75/06/17e58PICs3fESjK58PICJ7fWq_PIC2018.png!w480_520cc)
      no-repeat center 3px / contain;
    .num {
      font-style: normal;
      position: absolute;
      right: 0;
      top: 0;
      padding: 1px 6px;
      line-height: 1;
      background: #e26237;
      color: #fff;
      font-size: 12px;
      border-radius: 10px;
      font-family: Arial;
    }
    .shopcar {
      position: absolute;
      right: 0;
      top: 50px;
      width: 400px;
      height: 400px;
      position: absolute;
      background: #fff;
      transition: all linear 0.3s;
      box-shadow: 2px 2px -2px;
      display: none;
      .list {
        width: 400px;
        height: 400px;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        ul {
          padding: 0;
          width: 400px;
          height: 320px;
          display: flex;
          flex-direction: column;

          overflow-y: auto;
          li {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100px;
            list-style: none;
            border-bottom: 1px solid #f5f5f5;
            img {
              width: 80px;
              height: 80px;
              margin-left: 8px;
            }

            .center {
              margin-left: 10px;
              p {
                width: 200px;
                text-align: left;
                line-height: 20px;
                &:nth-of-type(1) {
                  font-size: 18px;
                }
                &:nth-of-type(2) {
                  font-size: 12px;
                  white-space: nowrap;
                  /*2. 超出的部分隐藏*/
                  overflow: hidden;
                  /*3. 文字用省略号替代超出的部分*/
                  text-overflow: ellipsis;
                }
              }
            }
            .rigth {
              p {
                &:nth-of-type(1) {
                  color: red;
                  font-size: 18px;
                }
                &:nth-of-type(1) {
                }
              }
            }
            .cuo {
              display: none;
              cursor: pointer;
              position: absolute;
              right: 10px;
            }
            &:hover .cuo {
              display: block;
            }
          }
        }
        ul::-webkit-scrollbar {
          display: none;
        }
        .button {
          width: 100%;
          height: 80px;
          padding-right: 8px;
          position: absolute;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            width: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            p {
              &:nth-of-type(1) {
                font-size: 16px;
                color: #999;
              }
              &:nth-of-type(2) {
                font-size: 20px;
                color: #cf4444;
              }
            }
          }
          button {
            width: 150px;
            height: 60px;
            border: 1px solid #27ba9b;
            font-size: 18px;
            color: #27ba9b;
            background: #e6faf6;
          }
        }
      }
    }
    &:hover .shopcar {
      height: 400px;
      display: block;
    }
  }
}
.navss {
  width: 100% !important;
  height: 80px;
  background: #ffffff;
  position: fixed;
  top: 0;
  // left: 340px;
  width: 1240px;
  display: flex;
  justify-content: center;
  animation: bounce-down 0.4s linear;
  z-index: 1000;

  @keyframes bounce-down {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  .navs {
    height: 80px;
    margin: 0 auto !important;
    display: flex;
    align-items: center;
    background: #ffffff;
    // transition: all linear 1s !important;
    .logo {
      width: 200px;
      height: 80px;
      background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png)
        no-repeat right 2px;
      background-size: 160px auto;
    }
    ul {
      width: 820px;
      height: 32px;
      display: flex;
      padding-left: 40px;
      li {
        list-style: none;
        line-height: 31px;
        margin-right: 40px;
        width: 38px;
        text-align: center;
        &:nth-last-of-type(1) {
          margin-right: 0 !important;
        }
        &:nth-of-type(1) {
          a {
            color: #333 !important;
            border-bottom: none;
          }
        }
        a {
          font-size: 16px;
          line-height: 32px;
          height: 32px;
          display: inline-block;
          color: #333;
          text-decoration: none;
          &:hover {
            color: #27ba9b !important;
            border-bottom: 1px solid #27ba9b !important;
          }
        }
      }
      .mouse {
        width: 1240px;
        height: 132px;
        display: flex;
        flex-wrap: wrap;
        padding: 0 70px;
        align-items: center;
        background: #fff;
        position: absolute;
        bottom: -150px;
        left: -160px;
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        box-shadow: 0 0 5px #ccc;
        transition: all 0.2s 0.1s;
        li {
          width: 110px;
          text-align: center;
          img {
            width: 60px;
            height: 40px;
          }
          p {
            font-size: 14px;
          }
        }
      }
    }
    .right {
      width: 220px;
      height: 16px;
      display: flex;
      text-align: center;
      padding-left: 40px;
      border-left: 2px solid #27ba9b;
      a {
        font-size: 16px;
        line-height: 16px;
        height: 32px;
        display: inline-block;
        color: #333;
        text-decoration: none;
        &:nth-of-type(1) {
          margin-right: 40px;
        }
        &:hover {
          color: #27ba9b !important;
        }
      }
    }
  }
}
</style>
